<template>
  <div class="newsDetails">
    <Header :fixed="true">
      <van-icon name="arrow-left" slot="left" />
      <div slot="title">提交</div>
    </Header>
    <div class="up-box">
        <div class="content">
            <van-field label="标题" v-model="title" placeholder="标题" class="mtop14" />
            <van-uploader accept="*" :before-read="handleFile">
                <van-field label="附件" v-model="name" placeholder="请选择附件" class="mtop14" />
            </van-uploader>
            <van-button class="login-btn" round color="linear-gradient(to right, #5694cf, #53a9e0)" size="large" @click="onSub">提 交</van-button>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { uploadReviewFeedBack } from '@/api/home'
export default {
  name: 'up1',
  data () {
    return {
      title: '',
      file: null,
      name: ''
    }
  },
  components: {
    Header
  },
  created () {
  },
  mounted () {
    
  },
  watch: {
    
  },
  mounted () {
  },
  methods: {
    handleFile (file) {
      this.file = file
      this.name = file.name
    },
    async onSub () {
        if (this.title == '') {
            this.$toast('请输入标题！');
            return
        }
        if (!this.file) {
            this.$toast('请选择附件！');
            return
        }
        let formData = new FormData()
        formData.append('userId', this.$store.state.user.userId)
        formData.append('id', this.$route.query.id)
        formData.append('title', this.title)
        formData.append('uploadFile', this.file)
        
        let {data} = await uploadReviewFeedBack(formData)
        if (data.result == 'suc') {
            this.$toast('上传成功！');
            this.$router.go(-1)
        }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.newsDetails {
  min-height: 100vh;
}
.up-box {
  padding-top: 70px;
  .tit {
    padding: 12px 0 16px 10%;
    font-size: @normal-size;
    color: #ccc;
  }
  .content {
      padding: 0 10% 0 10%;
      .login-btn {
            margin-top: 50px;
        }
        .info {
            margin: 0;
            padding-top: 16px;
            text-align: center;
            color: #ccc;
            font-size: @normal-size;
        }
  }
  .mtop14 {
    margin-top: 14px;
  }
}
</style>